<template>
  <v-edit-title :element="element" :index="index" :total="total">
    <div v-for="(item, i) in element.content" :key="i">
      <div class="item" @click="onChange(item, i)">
        <input
          v-if="item.checked"
          v-model="item.sort"
          class="active"
          disabled="disabled"
        />
        <span v-else class="box"></span>
        <v-edit-span v-model="item.name" class="content" />
        <a-icon type="close" class="red-icon" @click.stop="remove(i)" />
        <!-- <span class="content" v-html="item.name"></span> -->
      </div>
      <a-textarea
        v-if="item.questionChoiceType && item.checked"
        class="item_input"
        placeholder="填写内容..."
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
    </div>
    <a-button @click="add">新增内容</a-button>
  </v-edit-title>
</template>
<script>
export default {
  props: {
    element: {
      type: Object,
      default() {
        return {
          title: '',
          content: [],
          id: -1,
        }
      },
    },
    index: Number,
    total: Number,
  },
  data() {
    return { result: [] }
  },
  created() {
    console.log('content', this.element.content)
  },
  methods: {
    add() {
      const length = this.element.content.length + 1
      this.element.content.push({
        value: length,
        id: length,
        name: '新增的内容',
      })
    },
    remove(index) {
      this.element.content.splice(index, 1)
    },
    onChange(item, index) {
      item.checked = !item.checked

      if (item.checked) {
        this.result.push(index)
        item.sort = this.result.length
      }
      this.forceUpdate(item, index)
      this.excludeList(item, index)
      this.submit()
    },
    /** 取消选中元素时：
     * 1.将大于点击选项对应序号的元素数组遍历，依次对序号-1处理
     * 2.处理后的元素重新加入result数组
     */
    excludeList(item, index) {
      if (item.checked) return true
      const targetIndex = this.result.indexOf(index)
      const targetList = this.result.splice(targetIndex)
      // 跳过当前元素，从下一个选中的元素开始递减数字
      for (let i = 1; i < targetList.length; i++) {
        const idx = targetList[i]
        const child = this.element.content[idx]
        child.sort--
        this.result.push(idx)
        this.forceUpdate(child, idx)
      }
    },
    getResult() {
      // 拼接选中的选项
      const result = []
      this.element.content.forEach((item) => {
        if (!item.checked) return false
        if (item.require && !item.value) return false
        result.push(item)
      })
      return result
    },
    forceUpdate(item, index) {
      this.$set(this.element.content, index, item)
    },
    submit() {},
  },
}
</script>
<style lang="less" scoped>
.box {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #e2e2e2;
}
.active {
  cursor: pointer;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 0px;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  background: #0095ff;
  text-align: center;
}
.item {
  cursor: pointer;
  // height: 20.9px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .content {
    line-height: 1.5;
    margin-left: 10px;
  }
}
.item_input {
  margin-top: 14px;
  display: block;
}
</style>
